<template>
  <div>

    <p>iframe显示前端public下的静态html</p>
    <iframe name="child" id="child" v-bind:src="reportUrl"
            frameborder="1"
            style="width: 50%;height: 150px"
    ></iframe>

    <img src="favicon.ico" alt="123">

    <p>iframe显示后端首页</p>
    <iframe  v-bind:src="reportUrl2"
            frameborder="1"
            style="width: 50%;height: 150px"
    ></iframe>



<p>v-html显示后端html字符流</p>
    <div  v-html="htmlContent"
          style="width: 50%;height: 150px"
          >
    </div>


  </div>
</template>

<script>
export default {
  name: "TestD1",
  data() {
    return {
      reportUrl: 'report.html',
      reportUrl2:'/lte/',
      htmlContent:''
    }
  },
  mounted() {



    // this.htmlContent="<h2>2131313</h2>"


    this.$reqGlobal.get('/lte/html').then(res=>{

      this.htmlContent= res.data.data.htmlContent;

    })


    console.log(window.innerHeight)
    /**
     * iframe-宽高自适应显示
     */
    // function changeMobsfIframe() {
    //   const mobsf = document.getElementById('child')
    //   const deviceWidth = document.body.clientWidth
    //   const deviceHeight = document.body.clientHeight
    //   mobsf.style.width = (Number(deviceWidth) - 30) + 'px' // 数字是页面布局宽度差值
    //   mobsf.style.height = (Number(deviceHeight) - 80) + 'px' // 数字是页面布局高度差
    // }
    //
    // changeMobsfIframe()
    //
    // window.onresize = function() {
    //   changeMobsfIframe()
    // }
  }
}
</script>

<style scoped>

</style>
